<template>
	<view class="item">
		<view class="item-content" @click="handelItemClick">
			<view class="left">
				<view v-if="!token" class="no-login">
					<image src="@/static/default_header.png" class="image"></image>
					<view class="right">
						<text>请登录</text>
						<text>3秒登录，体验更多功能</text>
					</view>
				</view>
				<view v-else class="logined">
					<image v-if="avatar" :src="avatar" class="image"></image>
					<image v-else src="../../../static/default_header.png" class="image"></image>
					<view class="info">
						<view class="nickname">
							<text v-if="name">{{ name }}</text>
							<!-- <view v-else @click.stop.prevent="getUserinfo" class="userifo-btn">点击授权获得用户信息</view> -->
						</view>
						<text>{{ phoneNumber }}</text>
					</view>
				</view>
			</view>
			<view class="right"><van-icon name="arrow" size="18" v-if="!token" /></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		updateUserInfo
	} from '@/api/user.js'
	export default {
		name: 'xk-login-item',
		props: {},
		data() {
			return {}
		},
		computed: {
			...mapState(['token', 'name', 'avatar', 'phoneNumber'])
		},
		options: {
			styleIsolation: 'shared'
		},
		mounted() {},
		methods: {
			handelItemClick() {
				uni.navigateTo({
					url: './subPages/resume'
				})
			},
			getUserinfo() {
				let T = this
				uni.getUserProfile({
					desc: 'weixin',
					success(res) {
						let {
							userInfo
						} = res
						T.$store
							.dispatch('updateUserInfo', userInfo)
							.then(res => {
								console.log('更新用户信息成功')
							})
							.catch(err => {
								console.log('更新用户信息失败')
							})
					},
					error(err) {
						console.log('授权获取用户信息失败', err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;
		background: #07C160;
		color: #fff;

		.item-content {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 200rpx;
			padding: 0 15px;

			.left {
				flex: 1;

				.no-login {
					display: flex;
					align-items: center;

					.image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
					}

					.right {
						flex: 1;
						margin-left: 20rpx;

						text {
							display: block;
							color: #fff;
						}

						text:nth-child(1) {
							font-size: 36rpx;
							font-weight: 700;
							margin-bottom: 30rpx;
						}
					}
				}

				.logined {
					display: flex;

					.image {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
					}

					.info {
						display: flex;
						justify-content: center;
						flex-direction: column;
						margin-left: 30rpx;

						.nickname {
							font-size: 36rpx;
							margin-bottom: 30rpx;

							.userifo-btn {
								border: 1px solid #fff;
								font-size: 28rpx;
								border-radius: 10rpx;
								padding: 6rpx 10rpx;
							}
						}

						text {
							display: block;
							color: #fff;
						}
					}
				}
			}

			.right {}
		}
	}
</style>